import React, { Component } from 'react'
import { Icon } from 'antd';
import './index.scss'
export default class index extends Component {
    constructor(){
        super()
        this.state={
            index:0
        }
    }
    render() {
        return (
            <div className="index-content" style={{backgroundImage:`url(${this.props.url})`}}>
                <div className="focus-banner">
                    <div className="focus-wrq" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
                        <div className="focus-con">
                            <ul className="fbc-list">
                                {
                                    this.props.Beijing.map(item=>{
                                        return <li className="fbc-item"  key={item.id}>
                                                    <a href="###">
                                                    <img src={item.img} style={{opacity:(item.id===this.state.index+1)?1:0}} alt=""/>
                                                    </a>
                                                </li>
                                    })
                                }
                            </ul>
                            <span className=" fbc-btn fbc-left" onClick={this.addLeft}>
                                <i className="i-hv"><Icon type="left" /></i>
                            </span>
                            <span className=" fbc-btn fbc-right" onClick={this.addRight}>
                                <i className="i-hv"><Icon type="right" /></i>
                            </span>
                        </div>
                    </div>
                    <div className="fbc-trigger">
                        <ul className="fbc-trigger-con">
                            {
                                this.props.Beijing.map((text,index)=>{
                                return <li key={text.id} onMouseEnter={this.handleMouseEnters.bind(this,index)} onMouseLeave={this.handleMouseLeaves} className={text.id===this.state.index+1?'li1':'li2'}>{text.name}</li>
                                })
                            }
                        </ul>
                        <div className="fbc-trigger-line" style={{'left':this.state.index*195+293}}></div>
                    </div>
                </div>
            </div>
        )
    }
    addLeft=()=>{
        if(this.state.index<=0){
            return
        }else{
            this.setState({
                index:this.state.index-1
            })
        }
        
    }
    addRight=()=>{
        if(this.state.index>=this.props.Beijing.length-1){
            return
        }else{
            this.setState({
                index:this.state.index+1
            })
        }
    }
    handleMouseEnters=(e)=>{
        this.setState({
            index:e
        })
        clearInterval(this.timer)
    }
    handleMouseLeaves=()=>{
        this.andCount()
    }
    handleMouseEnter=()=>{
        clearInterval(this.timer)
    }
    handleMouseLeave=()=>{
        this.andCount()
    }
    componentDidMount(){
        this.andCount()
    }
    andCount=()=>{
        this.timer=setTimeout(()=>{
            if(this.state.index>=this.props.Beijing.length-1){
                this.setState({
                    index:0
                })
            }else{
                this.setState({
                    index:this.state.index+1
                })
            }
            
            this.andCount()
        },4000)
    }

}
